<template>
  <div class="container">
    <div class="nav-bar flex">
      <div :class="{active:areaSelecting}" @click="toggleArea">{{selectedArea||'选择区域'}}</div>
      <div :class="{active:isOilTypeShow}" @click="toggleOilType">{{currentOilTypeTitle||'油站类型'}}</div>
      <div @click="gotoSearch">
        搜索
      </div>
    </div>
    <div class="masker" v-if="isOilTypeShow" @click="isOilTypeShow=false">
      <div class="oil-station-div">
        <div class="oil-station-item" @click="toggleOilTypeItem(item,index)" v-for="(item,index) in oilStationTypes" :key="index">
          {{item}}
        </div>
      </div>
    </div>

    <div class="masker" v-if="areaSelecting" @click="areaSelecting=false">
      <div class="oil-station-list flex" @click.stop="noop">
        <div class="city-list">
          <div class="oil-station-item" :class="{selected:selectedCity==''}" @click="toggleOilAreaItems(null)">全部区域</div>
          <div class="oil-station-item" :class="{selected:item.title==selectedCity}" @click="toggleOilAreaItems(item,index)" v-for="(item,index) in oilareas" :key="index">
            {{item.title}}
          </div>

        </div>
        <div class="flex-con">
          <div class="oil-station-item" :class="{selected:selectedArea==(currentSelectedCityIndex>=0?oilareas[currentSelectedCityIndex].title:'')}" @click="toggleOilAreaItem(null)">
            
            {{currentSelectedCityIndex>=0?oilareas[currentSelectedCityIndex].title:'全部区域'}}
            </div>
          <template v-if="currentSelectedCityIndex>=0">
            <div class="oil-station-item" :class="{selected:item==selectedArea}"
             @click="toggleOilAreaItem(item)" 
             v-for="(item,index) in oilareas[currentSelectedCityIndex].children"
              :key="index">
              {{item}}
            </div>
          </template>
          
        </div>
      </div>

    </div>

    <div class="nav-bar-before"></div>
    <xd-datalist url="/api/api_oil_station/list" :autoload="false" ref="datalist">
      <template slot-scope="scope">
        <div class="list-item" v-for="item in scope.list" :key="item.id" @click="showOilPos(item)">
          <div class="border-b p1">
            <div class="flex">
              <img :src="item.image|absUrl" alt="" class="oil-img">
              <div class="flex-con oil-info">
                <div class="oil-title">
                  {{item.name}}
                </div>
                <div class="flex">
                  <img src="../../assets/icons/loc@2x.png" alt="" class="loc-icon">
                  <div class="flex-con one-line fz24 txt666">
                    {{item.addr}}
                  </div>
                </div>
              </div>
              <div @click.stop="noop">
                <a :href="'tel:'+ item.phone" class="phone-icon-wrap" >
                <img src="../../assets/icons/phone@2x.png" alt="" class="phone-icon">
              </a>
              </div>
              

            </div>
          </div>
          <div class="p1 clearfix" v-if="item.selfPay||item.tags">
            <div class="tag tag1" v-if="item.tags && item.tags.indexOf('优途')!=-1">优途站</div>
            <div class="tag tag2" v-if="item.tags && item.tags.indexOf('WIFI')!=-1">免费WiFi</div>
            <div class="tag tag3" v-if="item.selfPay">自助支付</div>
          </div>
        </div>
      </template>
    </xd-datalist>

  </div>

</template>


<style scoped lang="scss">
@import "../../styles/nav";
html,
body,
.container {
  background-color: #ebebeb;
}

.list-item {
  background-color: #fff;
  margin-bottom: 0.24rem;
}
.city-list {
  width: 4rem;
}
.masker {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.oil-station-div {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.04rem;
  background-color: #fff;
  width: 100%;
  z-index: 200;
  .oil-station-item {
    padding: 0.4rem;
    font-size: 0.35rem;
  }
}
.oil-station-item.selected {
  background-color: #eee;
}

.p1 {
  padding: 0.3467rem 0.4rem;
}

.oil-img {
  width: 3.32rem;
  height: 1.8533rem;
}

.oil-station-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.04rem;
  background-color: #fff;
  width: 100%;
  z-index: 200;
  .oil-station-item {
    padding: 0.4rem;
    font-size: 0.35rem;
  }
  & > div {
    height: 8rem;
    overflow: auto;
  }
}

.oil-info {
  padding-left: 0.2933rem;
}

.oil-title {
  font-size: 0.3467rem;
  color: #333;
  padding-bottom: 0.5067rem;
}

.loc-icon {
  width: 0.32rem;
  height: 0.44rem;
  margin-right: 0.2533rem;
}

.phone-icon {
  width: 0.64rem;
  display: block;
  height: 0.6267rem;
}

.tag {
  font-size: 0.2667rem;
  height: 0.52rem;
  line-height: 0.52rem;
  border-radius: 0.08rem;
  float: left;
  text-align: center;
  margin-right: 0.2533rem;
  min-width: 1.2rem;
  padding: 0 0.2133rem;
}

.tag1 {
  border: solid 1px #c4eec3;
  background-color: #e3fbe2;
  color: #019b00;
}

.tag2 {
  background-color: #fbf1da;
  border: solid 1px #eedcc3;
  color: #fe8611;
}

.tag3 {
  background-color: #fbe9e9;
  border: solid 1px #eec3c3;
  color: #f02320;
}
</style>

<script>
import { oilStationTypes } from "../../config/constants";
import { numericLiteral } from "babel-types";
let wx = require("weixin-js-sdk");
import { isWeiXin } from "../../utils/common";
export default {
  data() {
    return {
      list: [],
      currentSelectedCityIndex: -1,
      oilareas: [],
      selectedArea: "",
      currentOilTypeTitle: "",
      selectedCity: "",
      areaSelecting: false,
      isOilTypeShow: false,
      oilStationTypes
    };
  },
  mounted() {
    this.$get("/api/base_address/oil_areas").then(data => {
      this.oilareas = data;
    });
    if (isWeiXin()) {
      this.showLoading();
      this.$get("/api/wx/wxconfig", { url: location.href.split("#")[0] }).then(
        data => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ["openLocation", "getLocation"] // 必填，需要使用的JS接口列表
          });

          wx.ready(() => {
            wx.getLocation({
              type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: res => {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                this.hideLoading();
                this.$refs.datalist.setParams(res).refresh();
              }
            });
          });
        }
      );
    } else {
      this.$refs.datalist.refresh();
    }
  },
  methods: {
    showOilPos(pos) {
      wx.openLocation({
        latitude: pos.latitude, // 纬度，浮点数，范围为90 ~ -90
        longitude: pos.longitude, // 经度，浮点数，范围为180 ~ -180。
        name: pos.name, // 位置名
        address: pos.addr, // 地址详情说明
        scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    toggleOilAreaItems(item, index) {
      if (item) {
        this.selectedCity = item.title;
        this.currentSelectedCityIndex = index;
      } else {
        this.selectedCity = "";
        this.currentSelectedCityIndex = -1;
      }
    },
    toggleOilAreaItem(title) {
      if (title == null) {
        title = this.selectedArea =
          this.currentSelectedCityIndex >= 0
            ? this.oilareas[this.currentSelectedCityIndex].title
            : "";
      } else {
        this.selectedArea = title;
      }
      this.isOilTypeShow = false;
      this.areaSelecting = false;
      this.$refs["datalist"].addParam("area", title).refresh();
    },
    toggleOilType() {
      this.isOilTypeShow = !this.isOilTypeShow;
      this.areaSelecting = false;
    },
    toggleOilTypeItem(title, index) {
      this.$refs["datalist"].addParam("oilType", index).refresh();
      this.currentOilTypeTitle = title;
      this.isOilTypeShow = false;
    },
    gotoSearch() {
      this.$router.push("/oil/search");
    },
    toggleArea() {
      if (!this.areaSelecting) {
        this.areaSelecting = true;
        this.isOilTypeShow = false;
      } else {
        this.areaSelecting = false;
      }
    }
  }
};
</script>
